<template>
	<view class="index-box" :style="{'--color':vuex_config.themeColor1}">
		<block v-if="prodInfo.travel_status == '1'">
			<view class="module-title">出行日期</view>
			<view class="calendar-box">
				<sss-calendar ref="calendarRef" @change="onCalendar" />
			</view>
		</block>
		<view class="module-title">选择规格</view>
		<!--    规格列表-->
		<view class="spec-list" v-show="stockList[0]">
			<view class="spec-item" v-for="(item, index) in stockList" :key="item.pk_id">
				<view class="">
					<view class="spec-name u-line-1">{{item.name}}</view>
					<view class="spec-price">￥{{$price(item.amount)}}</view>
				</view>
				<!-- <view class="sww-rebate-wrap">
            <view class="sww-rebate">
              返 {{$price(item.rebate)}}
            </view>
          </view> -->
				<view class="spec-stem">
					<u-number-box v-model="item.num" input-width="100"
						:max="item.stock<item.max_num?item.stock:item.max_num"></u-number-box>
				</view>
			</view>
		</view>
		<!--    底部统计和提交-->
		<sww-goods-action>
			<view class="sub-price">
				<text class="">总计：</text>
				<text class="sww-tp">￥{{$price(totalPrice)}}</text>
			</view>
			<view class="sub-btn" @click="onSubmit">确定</view>
		</sww-goods-action>
	</view>
</template>
<script>
	import {
		getMoment
	} from "@/utils/moment";
	import {
		formatNumber
	} from "@/utils";
	import {
		uniNavigate
	} from "@/utils/uniPromise";
	import calendar from '../components/calendar.vue'
	export default {
		data() {
			return {
				prodInfo: {},
				currentDate: null,
				stockList: [],
				dataObj: {}
			}
		},
		components: {
			'sss-calendar': calendar
		},
		computed: {
			//选择的总金额
			totalPrice() {
				if (this.stockList && this.stockList.length > 0) {
					return this.stockList.reduce((sum, item) => {
						return sum + item.amount * item.num
					}, 0)
				} else {
					return 0
				}
			}
		},
		onLoad: function(options) {
			this.$nextTick(() => {
				// #ifdef   MP-ALIPAY || MP-BAIDU	|| MP-TOUTIAO	 
				var pages = getCurrentPages()
				var page = pages[pages.length - 2]
				this.prodInfo = page.$vm.dataObj

				this.$nextTick(() => { //神经病 明明上面已经有了一个$nextTick 但是这里不用$nextTick包着this.$refs.calendarRef百度小程序就会报错 ,上面不用$nextTick包着有时候又会报错 傻逼玩意 
					try {
						this.$refs.calendarRef.initData(new Date(), 'init')
					} catch (e) {
						this.getStockList()
					}
				})
				// #endif

				// #ifndef MP-ALIPAY || MP-BAIDU || MP-TOUTIAO	 
				let eventChannel = this.getOpenerEventChannel()
				eventChannel.once('acceptParams', (res) => {
					this.prodInfo = res
					this.$nextTick(() => {
						try {
							this.$refs.calendarRef.initData(new Date(), 'init')
						} catch (e) {
							this.getStockList()
						}
					})
				})
				// #endif
			})
		},
		onShow: function() {
			this.$nextTick(() => {
				if (this.stockList.length > 0) {
					this.getStockList()
				}
			})
		},
		methods: {
			//日期改变
			onCalendar(date) {
				this.currentDate = date

				switch (date.type) {
					case 'init': //初始化
						this.getMonthPrice()
						this.getStockList()
						break
					case 'date': //切换天
						this.getStockList()
						break
					case 'month': //切换月
						this.getStockList()
						this.getMonthPrice()
						break
				}
			},
			//获取本月所有规格价格，用于日历展示
			getMonthPrice() {
				this.$resPost('GetTicketStock', {
					product_id: this.prodInfo.fk_b_ticket_pro || this.prodInfo.pk_id,
					type: 2,
					date_travel: this.currentDate.curMonth.format('YYYY-MM')
				}).then(({
					data
				}) => {
					this.descList = data.map(item => {
						return {
							date: getMoment(item.date_travel, 'YYYY-MM-DD').toDate().getDate(),
							value: '￥' + item.amount
						}
					})
				})
			},
			//获取用户可选取规格
			getStockList() {
				this.$loading()
				this.stockList = []
				this.$resPost('GetTicketStock', {
					product_id: this.prodInfo.fk_b_ticket_pro || this.prodInfo.pk_id,
					...this.getStockParams()
				}).then(({
					data
				}) => {
					this.$hide()

					// 过滤库存小于0的规格
					let stockList = data.filter((el) => {
						return el.stock > 0
					})

					this.stockList = stockList.map(item => {
						return {
							...item,
							// #ifdef   MP-ALIPAY || MP-BAIDU  
							num: 1,
							// #endif

							// #ifndef MP-ALIPAY || MP-BAIDU
							num: 0,
							// #endif
							
							max_num: item.max_num === 0 ? 9999 : item.max_num
						}
					})

				}).catch(() => {
					this.$hide()
				})
			},
			// 获取参数
			getStockParams() {
				if (this.prodInfo.travel_status == '0') {
					return {
						type: '1'
					}
				} else {
					return {
						type: '3',
						date_travel: this.currentDate.curMonth.format('YYYY-MM') + '-' + formatNumber(this.currentDate
							.date)
					}
				}
			},
			// 提交
			onSubmit() {
				this.$u.debounce(() => {
					let selectList = this.stockList.filter(item => item.num > 0)
					if (selectList.length > 0) {
						let params = {
							prodInfo: this.prodInfo, //产品信息
							prodPrice: this.totalPrice, //产品总金额
							selectList, //规格列表
							enterDate: this.prodInfo.travel_status == '1' ? this.currentDate
								.curMonth.format('YYYY-MM') + '-' + formatNumber(this
									.currentDate.date) : '', //出行日期
						}


						// #ifdef   MP-ALIPAY || MP-BAIDU || MP-TOUTIAO	 
						this.dataObj = params
						this.$to(`/package/product/ticket/order/index`)
						// #endif

						// #ifndef MP-ALIPAY || MP-BAIDU || MP-TOUTIAO	 
						uniNavigate('/package/product/ticket/order/index').then(res => {
							res.eventChannel.emit('acceptParams', params)
						})
						// #endif

					} else {
						this.$toast('请先选择规格')
					}
				}, 500, true)
			}
		}
	}
</script>
<style lang="scss" scoped>
	.index-box {
		width: 100%;

		.module-title {
			width: 100%;
			height: 88rpx;
			padding-left: 46rpx;
			position: relative;
			display: flex;
			align-items: center;
			font-size: 30rpx;

			&::before {
				position: absolute;
				content: '';
				background-color: var(--color);
				left: 30rpx;
				top: 50%;
				margin: auto;
				width: 6rpx;
				height: 30rpx;
				transform: translate(0, -50%);
			}
		}

		.calendar-box {
			width: 100%;
			padding: 0 12rpx;
		}

		.spec-list {
			width: 100%;
			padding: 0 30rpx;

			.spec-item {
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 38rpx;

				.spec-name {
					max-width: 400rpx;
				}

				.spec-price {
					color: $sww-theme-price;
					margin-left: 20rpx;
				}

				.sww-rebate-wrap {
					margin: 0 auto 0 20rpx;
				}
			}
		}

		.sub-price {
			padding-left: 30rpx;
			font-size: 36rpx;
			font-weight: bold;
		}

		.sub-btn {
			width: 250rpx;
			height: 100rpx;
			background: var(--color);
			display: flex;
			align-items: center;
			justify-content: center;
			color: #ffffff;
			font-size: 30rpx;
			margin-left: auto;
		}
	}
</style>
